<template>
  <el-main>
    <div class="containe">
      <!-- 第一行 新一代票务系统 -->
      <div class="bg-style">
        <div class="middle hello" v-for="item in paragraph1" :key="item">
          <h1 v-if="item.text1">{{item.text1}}</h1>
          <p v-if="item.text2">{{item.text2}}</p>
          <div class="active">
            <el-col :span="3"><el-card class="btn1" shadow="hover">联系销售</el-card></el-col>
            <el-col :span="3"><el-card class="btn2" shadow="hover">立即试用</el-card></el-col>
          </div>
        </div>
      </div>
      <!-- 2 为什么选择多会 -->
      <div class="compare">
        <div class="middle">
          <div class="title clearfix" v-for="(item, index) in munu" :key="index">
            <h2 class="title-h2">{{item.title}}
              <router-link :to="item.path" class="right">
                <div class="small-botton">
                  <span class="anniu"><img :src="item.icon" />{{item.text}}</span>
                  <div class="small-ewm">
                    <img :src="item.ewm" />
                  </div>
                </div>
              </router-link>
            </h2>
          </div>
          <div class="catalog">
            <div class="width list" v-for="(item, index) in list" :key="index">
              <img :src="item.img" />
              <h3>{{item.title}}</h3>
              <ul v-for="(ite, idx) in item.list" :key="idx">
                <li>{{ite.text1}}<strong>{{ite.active}}</strong>{{ite.text2}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 3 多会的产品 -->
      <div class="bg-style plus">
        <div class="middle meeting">
          <div class="title clearfix">
            <h2 class="title-h2">{{munu1.title}}
              <router-link :to="munu1.path" class="right">
                <div class="small-botton">
                  <span class="anniu"><img :src="munu1.icon" />{{munu1.text}}</span>
                </div>
              </router-link>
            </h2>
          </div>
          <div class="catalog">
            <div class="small-box catalog">
              <div class="box width" v-for="(item,index) in list1" :key="index" :class="{yellow:index==2}">
                <div class="head">{{item.type}}</div>
                <div class="body">
                  <p>{{item.text}}</p>
                  <div class="price" :class="item.price">
                    {{item.price.unit}}<span class="value">{{item.price.much}}</span>
                    <span class="pre-year">{{item.price.cycle}}</span>
                  </div>
                  <div class="del" :class="item.del">
                    <span class="money">{{item.del.much}}</span>
                    <span class="discount">{{item.del.text}}</span>
                  </div>
                  <div class="columns catalog">
                    <div class="btn" v-for="(ite,idx) in item.btn" :key="idx">
                      <router-link :to="ite.path" class="btn1">{{ite.text}}</router-link>
                    </div>
                  </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 多会的客户 -->
      <div class="compare">
        <div class="middle">
          <div class="title">
            <h2 class="title-h2">{{munu2.title}}</h2>
            <div class="img">
              <span v-for="item in imageslogo1" :key="item"><img class="imgl" v-if="item.img1" :src="item.img1"><img v-if="item.img2" :src="item.img2"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 第三行 大型会议 -->
      <div class="bg-style plus">
        <div class="middle meeting router">
          <div class="large"><h2>服务案例</h2></div>
          <div class="flex">
            <div style="margin-right: 4px;" v-for="(item,index) in list2" :key="index">
              <el-row>
                <el-col>
                  <el-card :body-style="{ padding: '14px' }">
                    <img :src="item.img" class="image">
                    <div style="padding: 20px 0 12px 22px;" v-for="(ite,idx) in item.list2" :key="idx">
                      <span style="color: #333333;">{{ite.title}}</span>
                      <div class="bottom clearfix">
                        <time class="time"><i class="el-icon-time l"></i> {{ getCurrentTime }} <i class="el-icon-map-location l r"> <span> {{ite.span}} </span> </i></time>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
          <router-link :to="munu3.path">{{munu3.title}}</router-link>
        </div>
      </div>
    </el-main>
</template>

<script>
export default {
  data () {
    return {
      paragraph1: [
        { text1: '新一代活动票务系统', text2: '多会是领先的活动票务系统，为线下活动提供报名售票、现场签到等技术解决方案。' }
      ],
      munu: [
        {
          title: '为什么选择多会',
          path: '/',
          icon: require('@/assets/img/icon.png'),
          text: '体验购票',
          ewm: require('@/assets/img/ewm.jpg')
        }
      ],
      munu1:
      {
        title: '多会的产品',
        path: '/',
        icon: require('@/assets/img/cp.png'),
        text: '产品对比'
      },
      munu2:
      {
        title: '多会的客户'
      },
      munu3:
      {
        path: '/service',
        title: '查看更多服务案例'
      },
      list: [
        {
          img: require('@/assets/img/bajie.png'), // 图标地址
          title: '成本更低', // 图标旁文字
          list: [ // li 列表
            { text1: '所有版本按订阅计费', active: '，不限活动场次' },
            { text1: '微信零钱', active: '提现免费' },
            { text1: '企业版资金', active: '实时到账', text2: ' ，手续费低至 0.6%' },
            { text1: '极具价格优势的', active: '专用签到设备' }
          ]
        },
        {
          img: require('@/assets/img/zhuanshi.png'),
          title: '服务专业',
          list: [
            { text1: '独立的品牌形象，隐藏多会品牌' },
            { text1: '直接在您的公众号和网站完成购票' },
            { text1: '获得', active: '专属活动小程序' },
            { text1: '自定义出票短信和通知邮件等' }
          ]
        },
        {
          img: require('@/assets/img/xp.png'),
          title: '技术领先',
          list: [
            { text1: '扎实的技术基础，', active: '领先的软硬件方案' },
            { text1: '支持自有支付宝，微信支付 和 PayPal 商户' },
            { text1: '支持', active: '私有部署', text2: '，数据隐私有保障' },
            { text1: '提供功能定制服务' }
          ]
        }
      ],
      list1: [
        {
          type: '标准版',
          text: '轻松易用。通过微信小程序、公众号和网页版快速售票。',
          price: {
            unit: '￥',
            much: '299',
            cycle: '每年'
          },
          del: {
            much: '￥588',
            text: '年付优惠'
          },
          btn: [
            {
              text: '了解详情',
              path: '/'
            },
            {
              text: '免费试用',
              path: '/'
            }
          ]
        },
        {
          type: '高级版',
          text: '更多高级功能。支持在线选座、优惠券和渠道统计等。',
          price: {
            unit: '￥',
            much: '1,799',
            cycle: '每年'
          },
          del: {
            much: '￥3,588',
            text: '年付优惠'
          },
          btn: [
            {
              text: '了解详情',
              path: '/'
            },
            {
              text: '免费试用',
              path: '/'
            }
          ]
        },
        {
          type: '企业版',
          text: '独立微信小程序、公众号和网页版。微信支付、支付宝和 PayPal 实时到账。',
          price: {
            unit: '￥',
            much: '9,999',
            cycle: '每年'
          },
          del: {
            much: '￥13,996',
            text: '年付优惠'
          },
          btn: [
            {
              text: '了解详情',
              path: '/'
            },
            {
              text: '免费试用',
              path: '/'
            }
          ]
        }
      ],
      list2: [
        {
          img: require('@/assets/img/hay17.png'),
          list2: [
            { title: 'HAY! 17 PingWest 年度数字嘉年华', span: '北京' }
          ]
        },
        {
          img: require('@/assets/img/gnome.png'),
          list2: [
            { title: 'GNOME Asia 2017 亚洲峰会', span: '重庆' }
          ]
        },
        {
          img: require('@/assets/img/rubyconf.png'),
          list2: [
            { title: 'RubyConf China 2017', span: '杭州' }
          ]
        }
      ],
      imageslogo1: [
        { img1: require('@/assets/img/logo1.png'), img2: require('@/assets/img/logo2.png') },
        { img1: require('@/assets/img/logo3.png'), img2: require('@/assets/img/logo4.png') },
        { img1: require('@/assets/img/logo5.png'), img2: require('@/assets/img/logo6.png') },
        { img1: require('@/assets/img/logo7.png'), img2: require('@/assets/img/logo8.png') }
      ]
    }
  },
  computed: {
    getCurrentTime: function () {
      return ((new Date()).getMonth() + 1) + '月' + (new Date()).getDate() + '日'
    }
  }
}
</script>

<style>
@import "~@/assets/css/main.css";
@import "~@/assets/css/template.css";
@import "~@/assets/css/public.css";
</style>
